<template>
  <div>
    <img src="../assets/img/bgdlogin.png" width="100%" height="100%" />
    <div style="position:absolute;left: 27px;top: 22px;">
      <img width="123px" height="35px" style="display: inline-block;" src="../assets/img/zhongxinlogin.png">
          <img width="79px" height="25px" style="display: inline-block;margin-left: 20px;" src="../assets/img/kaixinlogin.png">
    </div>
    <div id="containDiv">
      <div style="position: absolute;right: 0; top: 0;z-index: 99">
        <img v-if="loginstuas == 1" id="loginWithPwd" style="cursor: pointer; " @click="loginstuas = 2" width="97px"
          height="97px" src="https://kaixinyi.citicbank.com/statics/icon-v2/login/switch-qr-logo.png">
        <img v-if="loginstuas == 2" id="loginWithFace" style="cursor: pointer;" width="97px" @click="loginstuas = 1"
          height="97px" src="https://kaixinyi.citicbank.com/statics/icon-v2/login/switch-pwd-logo.png">
      </div>

      <div v-if="loginstuas == 1" id="loginDiv" style="height: 100%; padding-top: 126px; display: block;">
        <div class="" style="position: absolute;text-align: center;top: 56px;left: 50%;font-size: 32px;width: 200px;margin-left: -100px;">
          密码登录
        </div>
        <span style="color: red;height: 16px;display:block;padding-left: 30px;" id="checkCodeInfo"></span>

        <div style="margin-bottom: 15px;margin-top: 10px;">
          <span v-if="stuass === 1" style="color: red;height: 16px;display:block;padding-left: 30px;" id="checkCodeInfo">*请输入账号、密码</span>
          <span v-if="stuass === 2" style="color: red;height: 16px;display:block;padding-left: 30px;" id="checkCodeInfo">*请输入账号</span>
          <span v-if="stuass === 3" style="color: red;height: 16px;display:block;padding-left: 30px;" id="checkCodeInfo">*请输入密码</span>
          <input v-model="sj" id="mobile" style="padding-left: 15px;height: 45px; width: 350px; margin-left: 30px; font-size: 16px;"
            class="form-control" placeholder="请输入手机号">
          <div style="width: 100%;padding: 0;margin-top: 5px;padding-left: 20px;height: 10px">
            <span style="color: red;font-size: 12px" message="" id="checkMobile"></span>
          </div>
        </div>
        <div style="margin-bottom: 15px">
          <input id="pwd" style="padding-left: 15px;height: 45px; width: 350px; margin-left: 30px; font-size: 16px;"
            autocomplete="new-password" class="form-control" v-model="pwd" type="password" placeholder="请输入密码">
          <div style="width: 100%;padding: 0;margin-top: 5px;padding-left: 20px;height: 10px">
            <span style="color: red;font-size: 12px;padding-left: 30px;" message="" id="checkPwd"></span>
          </div>
        </div>
        <div>
          <div id="codePicture" style="margin-top: 15px;display: none" class="input-group">
            <input id="inputCode" class="form-control" placeholder="请输入验证码" maxlength="4" minlength="4" style="padding-left: 15px;height: 45px; width: 245px; margin-left: 30px; font-size: 16px;">

            <span class="input-group-btn" style="color: red">
              <div active="true" id="checkCode" class="code">r8Qz</div>
            </span>
          </div>

          <div style="height: 10px;padding-right: 40px;position: absolute;width: 100%;left: 0;bottom: 155px;">
            <a style="float: right;margin-right: 50px;padding-top: 5px;cursor: pointer;">忘记密码？</a>
          </div>

          <div style="bottom: 85px;position: absolute;display: block;">
            <input @click="toshouye()" id="loginBtn" type="button" style="background-color: #999999;color: white;height: 45px; width: 350px; margin-left: 30px; font-size: 16px;"
              value="登录">
          </div>
        </div>
      </div>
      <div v-if="loginstuas == 2" id="qcDiv" style="height: 100%; padding-top: 126px;">
        <div class="" style="position: absolute;text-align: center;top: 56px;left: 50%;font-size: 32px;width: 200px;margin-left: -100px;">
          扫码登录
        </div>
        <div style="width: 235px;height: 235px;margin: auto">
          <img id="qcImg" src="https://kaixinyi.citicbank.com/getQC//be11938a48cf4ad699f934631203c852" width="100%"
            height="100%">
        </div>

        <div style="width: 100%; text-align: center; font-size: 24px;margin-top: 20px;">
          打开微信&nbsp;扫描二维码
        </div>

        <div style="width: 100%; text-align: center; font-size: 16px;margin-top: 16px;color: #999999;">
          免登录｜更快捷｜更安全
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        // 扫码or密码
        loginstuas: 1,
        // 手机号
        sj: "",
        // 密码
        pwd: "",
        // 验证
        stuass: "",
      }
    },
    methods: {
      // 登录
      toshouye() {
        // 判断是否为空
        if (this.sj == "" && this.pwd == "") {
          this.stuass = 1
        } else if (this.sj == "") {
          this.stuass = 2
        } else if (this.pwd == "") {
          this.stuass = 3
        } else {

          this.$router.push({
            name: 'IndexView'
          })
        }
      }
    },
    // mounted(){
    //   document.body.style.backgroundImage="url(../assets/img/bgdlogin.png)";
    // }
  }
</script>

<style scoped>
  .code {
    font-family: Arial;
    font-style: italic;
    color: blue;
    font-size: 20px;
    border: 0;
    padding: 7px 3px;
    letter-spacing: 3px;
    font-weight: bolder;
    float: left;
    cursor: pointer;
    width: 94px;
    height: 45px;
    line-height: 34px;
    text-align: center;
    vertical-align: middle;
    background-color: #D8B7E3;
  }

  span {
    text-decoration: none;
    font-size: 12px;
    color: #288bc4;
    padding-left: 10px;
  }

  span:hover {
    text-decoration: underline;
    cursor: pointer;
  }

  #containDiv {
    width: 440px;
    height: 520px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -220px;
    margin-top: -260px;
    box-shadow: 0 4px 30px 0 #E2D0D0;
    border-radius: 8px;
    background: #FFFFFF;
  }

  .inform {
    font-family: Arial;
    font-size: 17px;
    width: 350px;
    margin: 50px auto;
    text-align: center;
  }

  .msg-button {
    width: 255px;
    margin: 50px auto;
  }

  .inform2 {
    font-family: Arial;
    font-size: 17px;
    width: 255px;
    margin: 90px auto;
  }
</style>
